<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
    <div id="app" class="container">
        <div class="row" style="background-color: white; height: 60px; padding: 13px; border: none; border-radius: 8px;">
            <div class="col-md-1 col-md-offset-1">
                <label style="height: 34px; line-height: 34px;">用户名:</label>
            </div>
            <div class="col-md-3">
                <input type="text" class="form-control" v-model="queryParam.user_name">
            </div>
            <div class="col-md-1 col-md-offset-1">
                <label style="height: 34px; line-height: 34px;">性别:</label>
            </div>
            <div class="col-md-3">
                <select class="form-control" v-model="queryParam.sex">
                    <option v-for="sex in sexList" :value="sex.id">{{sex.label}}</option>
                </select>
            </div>
            <div class="col-md-1">
                <button class="btn btn-primary" @click="doSearch">查询</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="height: 50px; line-height: 50px;">
                <button class="btn btn-info" @click="doAdd">新增</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                    <caption>xxx列表</caption>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="u in users">
                        <td>{{u.id}}</td>
                        <td>{{u.uname}}</td>
                        <td>{{u.age}}</td>
                        <td>{{u.sex}}</td>
                        <td>
                            <button class="btn btn-link" @click="doUpdate(u.id)">修改</button>
                            <button class="btn btn-link" @click="doDelete(u.id)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <ul class="pagination">
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                </ul>
            </div>
        </div>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                queryParam: {
                  user_name: null,
                  sex: null
                },
                users :[
                    {id:'1001', uname:'张三', age:18, sex:'男'},
                    {id:'1002', uname:'李四', age:18, sex:'男'},
                    {id:'1003', uname:'王五', age:18, sex:'男'},
                    {id:'1004', uname:'赵六', age:18, sex:'男'},
                    {id:'1005', uname:'小丽', age:18, sex:'男'},
                    {id:'1006', uname:'二哈', age:18, sex:'男'}
                ],
                sexList: [
                    {id:0, label:'男'},
                    {id:1, label:'女'}
                ]
            },
            methods: {
                doSearch(){
                    console.log(this.queryParam.user_name);
                    console.log(this.queryParam.sex);
                },
                doAdd(){
                    window.parent.main_right.location.href = "demo_add_update.html";
                },
                doUpdate(id){
                    window.parent.main_right.location.href = "demo_add_update.html?id="+id;
                },
                doDelete(id){

                }
            },
            created: function () {
                this.queryParam.sex = 1;
            }
        });
    </script>
</body>
</html>